<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <tree-tools :node-data="titleDeda" />
        <!-- 树形结构  // data 提供数据 // > props 配置数据的属性名称-->
        <el-tree :data="departs" :props="defaultProps">
          <!-- 中间的代码就是插槽内容，用于定制每一行的布局效果 -->
          <template v-slot="scope">
            <tree-tools :node-data="scope.data" @on-success="onSuccsess" @toggle-box="toggleBox" />
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- 添加部门 -->
    <AddDept :operate-type="operateType" :dlist="dlist" :is-show-dept.sync="isShowDept" :current-pid="currentPid" @toggle-box="toggleBox" @on-success="onSuccsess" />
  </div>
</template>

<script>

import TreeTools from './components/TreeTools.vue'
import { reqGetDepartments } from '@/api/departments'
import AddDept from './components/AddDept.vue'
export default {
  components: { TreeTools, AddDept },
  data () {
    return {
      // loading 加载状态
      loading: false,
      // 操作类型
      operateType: 'add',
      // 原始的部门列表数据(用于表单验证)
      dlist: [],
      // 控制添加部门弹窗标志位
      isShowDept: false,
      // 当前父级部门id
      currentPid: '',
      titleDeda: {
        id: '',
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        root: true
      },
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  created () {
    this.loadDepartList()
  },
  methods: {
    // 获取部门的原始列表数据
    async loadDepartList () {
      try {
        this.loading = true
        const ret = await reqGetDepartments()
        // console.log(ret)
        if (ret.code === 10000) {
          // 获取部门列表数据成功
          // 后端返回的原始的列表数据
          this.dlist = ret.data.depts
          this.departs = this.tranlateListToTree(ret.data.depts, '')
          this.titleDeda.name = ret.data.companyName
        }
      } catch (err) {
        console.log(err)
        this.$message.error('获取部门数据失败')
      } finally {
        // finally 无论成功与否 都会触发 ，一般用于销毁不在使用的资源，或者终止数据
        // 隐藏loading
        this.loading = false
      }
    },
    // 把普通的列表转换为树形结构:查找list中pid是指定值的子节点
    tranlateListToTree (list, pid) {
      // 定义一个空数组
      const result = []
      // 遍历获取到的list数据
      list.forEach(item => {
        // 判断,如果每个数据的pid等于'' 就是一级节点
        if (item.pid === pid) {
          // 查找当前节点的子节点, 用当前节点的id查找他的子节点
          const children = this.tranlateListToTree(list, item.id)
          if (children && children.length > 0) {
            // 证明当前节点包含子节点,给当前节点添加一个子属性
            // 给当前节点添加找到的子节点
            item.children = children
          }

          result.push(item)
        }
      })
      return result
    },
    // 删除成功//刷新页面
    onSuccsess () {
      this.loadDepartList()
    },
    // 显示弹窗
    toggleBox (info) {
      console.log(info)
      this.isShowDept = info.isShow
      this.currentPid = info.pid
      // 操作类型
      this.operateType = info.type
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}
</style>
